// 账户管理
<template>
  <el-row class="section-content">
    <el-col :span="24">
      <TopManu/>
    </el-col>
    <el-col :span="6" class="organization-padd" style="borderRight:1px solid #02BF6B;height:100%;">
      <div style="paddingTop:10px">
        <el-input placeholder="请输入内容" size="small" v-model="keyValue" class="input-with-select">
          <el-button slot="append" icon="el-icon-search">查询</el-button>
        </el-input>
      </div>
      <el-col :span="24" style="marginTop:20px;">
        <!-- @node-click="getDetails" -->
        <el-tree :data="data" :props="defaultProps" :default-expand-all="true" ></el-tree>
      </el-col>
    </el-col> 

    <el-col :span="18"  class="pd-20">
       <el-col :span="10" style="padding:10px 0 10px 0;">
          <el-input placeholder="请输入内容" size="small" v-model="keyValue" class="input-with-select">
            <el-button slot="append" icon="el-icon-search">查询</el-button>
          </el-input>
       </el-col>
       <FromList :tableData="tableData" :tableTitle="tableTitle" />
    </el-col>
  </el-row>
</template>

<script>
let that
import FromList from "@/forComponents/fromList/fromList"
import {nanoid} from "nanoid"
import { Loading } from 'element-ui';
import TopManu from "@/components/TopMenu"
import {getIndex,getDeptIndex} from "@/api/account"
  export default {
    name:"account",
    data(){
    return {
      index:0, //loding控制
      loading:"",
      keyValue:"",
      tableData:[
        
      ],
      tableTitle:[
        {
          prop:"name",
          name:"账户名",
          type:1
        },
        {
          prop:"real_name",
          name:"姓名",
          type:1
        },
        {
          prop:"dept_name",
          name:"科室",
          type:1
        },
        {
          prop:"positional_title",
          name:"职称",
          type:1
        },
         {
          prop:"role_name",
          name:"角色",
          type:1
        },
         {
          prop:"phone",
          name:"联系方式",
          type:1
        }
      ],
      treeNodeId:"",
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf:"isLeaf"
      },
      dialogVisible:false, //控制添加组织开关
      data:[],
      arr:[], //组织信息
      page:0,
      limit:100,
      formInline: {
        name: '',
        number: '',
        link_tel:"",
        head_user:"",
        address:"",
      },
      
      rules: {
          name:[
            {
              required: true, message: '请输入部门名称', trigger: 'blur'
            },
            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],
          // number:[
          //   {
          //     required: true, message: '请输入部门编号', trigger: 'blur'
          //   }
          // ],
          link_tel:[
            {
              required: true, message: '请输入电话', trigger: 'blur'
            }
          ],
          head_user:[
            {
              required: true, message: '请选择领导人', trigger: 'blur'
            },
          ],
          // address:[
          //    {
          //     required: true, message: '请输入部门地址', trigger: 'blur'
          //   },
          // ]
      },
      saveFlag:false, //控制完善编辑
    }
  },
  mounted(){
    that = this 
    that.getIndex()
    that.getDeptIndex()
    // console.log(that.loding({
    //   lock: true,
    //   text: '',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // }),"loding")
  },
  components:{
     FromList,
     TopManu
  },
  watch:{
			index(to){
				if(to == 0){
					that.loading.close();
				}else{
				 that.loading = this.$loading({
            lock: true,
            text: '',
            background: 'rgba(0, 0, 0, 0.7)'
          });
				}
			}
  },
  methods:{
    getIndex(){
      that.index++
      let {page,limit} = this
      getIndex({page,limit})
      .then(res=>{
        that.index--
        // res.data.list.forEach(item=>{
         
        // })
        that.tableData = that.tableData.concat(res.data.list)
      })
      .catch(e=>{
        that.index--
        this.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    getDeptIndex(){
      getDeptIndex()
      .then(res=>{
        res.data.forEach(item=>{
          console.log(res)
        })
        that.data = res.data
      })
      .catch(e=>{
        that.index--
        this.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    modification(node,data){
      let {name,link_tel,head_user,id,address,number} = data
      that.formInline = {
        link_tel,
        name,
        head_user,
        id,
        address,
        number
      }
      that.saveFlag = true
    },
    handleSave(){
      that.index++
      modificationOrganization({...that.formInline})
      .then(res=>{
        Object.keys(that.formInline).forEach(key=>{that.formInline[key]=''})
        that.getList()
        this.$message({
          message:"编辑成功",
          type: 'suucess'
        });
        that.index--
      })
      .catch(e=>{
        that.index--
        this.$message({
          message:e.message,
          type: 'error'
        });
      })
    },  
    getDetails(q){
      that.index++
      getDetails({id:q.id})
      .then(res=>{
        that.tableData = []
        if(res.data.get_head_user){
          let {get_head_user:{real_name}} = res.data
          res.data.realName = real_name
        }
        
        if(res.data.group_name){
          let {group_name:{name}} = res.data
          res.data.grName = name
        }

        if(res.data.org_name){
          let {org_name:{name}} = res.data
          res.data.orgName = name
        }
        console.log(res.data)
        that.tableData.push({...res.data})
        that.index--
      })
      .catch(e=>{
        that.index--
        this.$message({
          message:e.mssage,
          type: 'error'
        });
      })
    },
  
  },
  destroyed(){
    that.loading.close();
  },
}
</script>

<style lang="scss" scoped>
  // .el-button{
  //   background-color:#02BF6B;
  // }

  .organization-padd{
    padding: 0 20px;
    box-sizing: border-box;
  }

  .buttom{
    text-align: right;
    margin-top:20px;
    margin-bottom: 20px;
  }

  .pd-20{
    padding:0px 20px;
    box-sizing: border-box;
  }  

  .section-content{
    height: calc(100vh - 90px);
  }
</style>
